<template>
    <view class="guidebox h100vh">
        <hy-statusheight></hy-statusheight>
        <swiper class="swiperbox" :current="newindex" @change="swipercion">
            <swiper-item
                class="swiper-item-box"
                v-for="(item, index) in list"
                :key="index"
            >
                <view class="item-1">
                    <view class="title">
                        <view class="head">{{ item.title }}</view>
                        <span class="name">{{ item.name }}</span>
                    </view>
                    <image class="img" :src="item.img" mode="widthFix"></image>
                </view>
                <view class="item-2">
                    <template v-if="index != 2">
                        <span
                            class="bannerpoint"
                            v-for="(item, index) in list"
                            :key="index"
                            :class="[activeindex == index ? 'active' : '']"
                        ></span>
                    </template>
                    <view
                        v-if="index == 2"
                        class="startbtn"
                        @click="Getweclome"
                    >
                        马上开启
                    </view>
                </view>
            </swiper-item>
        </swiper>
        <view class="gohomebtn" v-show="activeindex != 2" @click="swipertext">
            跳过
        </view>
    </view>
</template>

<script setup lang="ts">
const list = ref([
    {
        title: '海量试题练习',
        name: '背题模式，专题式微课，题库更新快',
        img: '/static/guide/one.png',
    },
    {
        title: '线上课程丰富',
        name: '海外留学师资，丰富企业与学校实战',
        img: '/static/guide/two.png',
    },
    {
        title: '提升学历不是梦',
        name: '实体办学，专注于成人继续教育',
        img: '/static/guide/three.png',
    },
])
const newindex = ref(0)
const activeindex = ref(0)
const swipercion = (item) => {
    activeindex.value = item.detail.current
    newindex.value = activeindex.value
}

const swipertext = () => {
    uni.setStorageSync('guide', 'true')
    uni.switchTab({ url: '/pages/home/home' })
}

const Getweclome = () => {
    uni.setStorageSync('guide', 'true')
    uni.switchTab({ url: '/pages/home/home' })
}
</script>

<style lang="scss" scoped>
.guidebox {
    .swiperbox {
        height: 100%;
        .item-1 {
            .title {
                text-align: center;
                margin: 122rpx 0 136rpx 0;

                .head {
                    color: $hy-color-font-1;
                    font-size: 48rpx;
                    font-weight: 550;
                    letter-spacing: 10rpx;
                    margin-bottom: 35rpx;
                }

                .name {
                    color: $hy-color-font-3;
                    font-size: 30rpx;
                    letter-spacing: 6rpx;
                }
            }

            .img {
                display: block;
                width: 750rpx;
                margin: 30rpx 0 30rpx 0;
            }
        }

        .item-2 {
            margin-top: 64rpx;
            display: flex;
            justify-content: center;

            .bannerpoint {
                margin: 0 6rpx;
                border-radius: 100rpx;
                width: 16rpx;
                height: 16rpx;
                background-color: #eee;
                transition: 0.5s;
            }

            .active {
                height: 16rpx;
                width: 50rpx;
                background-color: $hy-color-host-red;
            }

            .startbtn {
                color: $hy-color-host-red;
                font-weight: 500;
                width: 240rpx;
                height: 76rpx;
                line-height: 76rpx;
                text-align: center;
                border-radius: 60rpx;
                border: 2rpx solid $hy-color-host-red;
            }
        }
    }

    .gohomebtn {
        width: 76rpx;
        height: 76rpx;
        font-size: 24rpx;
        border-radius: 50%;
        background-color: #000;
        color: #fff;
        text-align: center;
        line-height: 76rpx;
        position: absolute;
        bottom: 82rpx;
        right: 32rpx;
    }
}
</style>
